<template>
  <div class="divWarehouse">
    <areaSearchBtn @search="search" />
    <div class="table">
      <div class="divContent">
        <el-button class="newWarehouse" type="success" round @click="add">新增仓库</el-button>
      </div>
      <el-table
        :data="list"
        border
        stripe
        :header-cell-style="{ background:'#f9f6ee', 'font-weight':'500','font-size':'13px',
        }"
      >
        <el-table-column
          align="center"
          type="index"
          label="序号"
          width="70"
        />
        <el-table-column
          prop="code"
          label="仓库编码"
          width="150"
        />
        <el-table-column
          prop="name"
          label="仓库名称"
          width="150"
        />
        <el-table-column
          label="仓库类型"
          width="150"
        >
          <template #default="scope">
            {{ type[scope.row.type] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="location"
          label="省/市/区"
          width="200"
        />
        <el-table-column
          prop="address"
          label="详细地址"
          width="150"
        />
        <el-table-column
          label="仓库状态"
          width="150"
        >
          <template #default="scope">
            {{ status[scope.row.status] }}
          </template>
        </el-table-column>
        <el-table-column
          prop="surface"
          label="仓库面积m²"
          width="150"
        />
        <el-table-column
          prop="includedNum"
          label="库存数量"
          width="150"
        />
        <el-table-column
          prop="personName"
          label="负责人"
          width="150"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
          width="150"
        />
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="200"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleClick(scope.row)">{{ scope.row.status?"停用":'启用' }}</el-button>
            <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <TablePagibg :params="params" @handleSizeChange="handleSizeChange" @currentPageChange="currentPageChange" />
  </div>
</template>

<script>
import areaSearchBtn from '@/views/manage-base-info/components/areaSearchBtn.vue'
import TablePagibg from '@/components/TablePaging'
import { getWarehousePage, modifyWareHuose, deleteyWareHuose } from '@/api'
export default {
  name: 'Warehouse',
  components: { areaSearchBtn, TablePagibg },
  data() {
    return {
      // 列表
      list: [],
      // 初始数据
      page: {
        like_code: '',
        like_name: '',
        // status: '',
        current: 1,
        size: 10,
        descs: 'createTime'
      },
      // 分页器初始数据
      params: {
        /*
        第几页
        每页个数
        总页数
         */
        current: '',
        size: '',
        total: ''
      },
      // 仓库类型
      type: {
        ZZ: '中转仓',
        JG: '加工仓',
        CB: '储备仓',
        LC: '冷藏仓'
      },
      // 仓库状态
      status: {
        0: '停用',
        1: '启用'
      }
    }
  },
  created() {
    this.fetchPage()
  },
  methods: {
    async fetchPage() {
      const { data } = await getWarehousePage(this.page)
      this.params.current = data.current
      this.params.size = data.size
      this.params.total = data.total
      this.list = data.records
    },
    // 新增仓库
    add() {
      this.$router.push('/manage-base-info/null')
    },
    // 编辑
    async edit(row) {
      this.$router.push({
        path: '/manage-base-info/null',
        query: {
          id: row.id
        }
      })
    },
    // 停用
    handleClick(row) {
      this.$confirm(`确定要${this.status[row.status]}:${row.name}吗?`, `确认${this.status[row.status]}`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        // 修改状态
        await modifyWareHuose({ id: row.id, status: row.status ? 0 : 1 })
        this.$message.success('状态更新完成')
        this.fetchPage()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    // 删除
    async del(val) {
      await deleteyWareHuose(val.id)
      this.fetchPage()
    },
    // 搜索框
    search(val) {
      this.page = val
      this.fetchPage()
    },
    // 子组件传入每页显示数
    handleSizeChange(newPage) {
      console.log(newPage)
      this.page.size = newPage
      this.fetchPage()
    },
    // 页码发生变化传入当前页调用
    currentPageChange(newPage) {
      this.page.current = newPage
      this.fetchPage()
    }
  }
}
</script>
<style lang="scss">
.divWarehouse {
  margin: 20px 30px 30px 30px;
}
.divContent {
  .newWarehouse {
    margin: 20px 0 20px 30px;
    background: #00be76;
    color: #fff;
  }
  .newWarehouse:hover {
    background: #007a4c;
  }
}
//table
.table {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
}
</style>
